<template>
  <div class="table-container">
    <a-table
      size="small"
      :columns="columns"
      :data-source="tableList"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'pic'">
          <a-image
            v-if="record.pic && record.pic.length > 0"
            :width="50"
            :src="record.pic[0]"
            :preview="{
              src: record.pic[0],
            }"
          />
          <span v-else>-</span>
        </template>
        <template v-if="column.key === 'subTitle'">
          <a-tag :color="SubTypeEnum[record.subTitle as '1' | '2' | '3' | '4'].color">{{
            SubTypeEnum[record.subTitle as '1' | '2' | '3' | '4'].value
          }}</a-tag>
        </template>
        <template v-if="column.key === 'activeid'">
          <span v-if="record.activeid?._id">
            {{ record.activeid?.name }}
          </span>
        </template>
        <template v-if="column.key === 'action'">
          <a-space v-if="!record.activeid?._id">
            <a-button type="link" size="small" @click="handleCheck(record)">选中</a-button>
          </a-space>
          <a-space v-else>
            <a-button type="link" disabled size="small" danger>已在活动中</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { message, type TableProps } from 'ant-design-vue'
import { SubTypeEnum } from '@/utils/enumeration'
// import cloud from '@/utils/cloud'
import { bindActiveDraw } from '@/api/active.api'

export interface DrawItem {
  _id: string
  name: string
  pic: string[]
  num: number
  use_num: number
  probability: number
  bottom_num: number
  price: number
  subTitle: '1' | '2' | '3' | '4'
  createdAt: number
  updatedAt: number
}
const prop = defineProps<{
  activeid: string
  tableList: DrawItem[]
  pagination: {
    total: number
    current: number
    pageSize: number
  }
}>()
const emit = defineEmits(['changePagination', 'handlePushSelectDrawList'])

const columns = [
  {
    title: '奖品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '奖品图片',
    dataIndex: 'pic',
    key: 'pic',
  },
  {
    title: '价值',
    dataIndex: 'price',
    key: 'price',
    width: 80,
    customRender: ({ text }: { text: number }) => `¥${(text / 100).toFixed(2)}`,
  },
  {
    title: '奖品标签',
    dataIndex: 'subTitle',
    key: 'subTitle',
    with: 80,
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 80,
  },
]

const handleTableChange: TableProps['onChange'] = (e) => {
  emit('changePagination', {
    pageSize: e.pageSize,
    current: e.current,
  })
  // 这里添加获取数据的逻辑
}

const handleCheck = (record: DrawItem) => {
  console.log('编辑', record)
  // 这里添加编辑逻辑
  hanldInfoDarw(record)
}

const hanldInfoDarw = async (record: DrawItem) => {
  const { code, message: msg } = await bindActiveDraw(prop.activeid, { draw_id: record._id })
  if (code === 200) {
    message.success('添加奖品成功')
    emit('handlePushSelectDrawList', record)
  } else {
    message.error(msg || '添加奖品失败')
  }
}
</script>

<style scoped>
.table-container {
  padding: 10px;
}
</style>
